<template>
  <el-dialog title="手动推送通知" :visible.sync="show" :close-on-click-modal="false" :show-close="!btnLoading" width="500px" @closed="closed">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="通知标题" prop="title"><el-input v-model.trim="form.title" placeholder="请输入通知标题" :maxlength="50" show-word-limit /></el-form-item>
      <el-form-item label="通知内容" prop="body"><el-input v-model.trim="form.body" type="textarea" placeholder="请输入内容" :maxlength="255" show-word-limit/></el-form-item>
      <!-- <el-form-item label="额外参数" prop="parameters"><el-input v-model.trim="form.parameters" placeholder="通知额外参数" :maxlength="255" /></el-form-item> -->
      <el-form-item label="接收人" prop="userNames" ref="userNames" >
        <el-input class="fake-selector" readonly :value="showUserNames" auto-complete="off" placeholder="请选择接收人" @click.native="showSelectUser = true">
          <i slot="append" class="el-icon-arrow-down" />
        </el-input>
      </el-form-item>
      <el-form-item label="消息接收角色" prop="roleIds" ref="roleIds" >
        <el-select v-model="form.roleIds" multiple clearable filterable placeholder="请选择消息接收角色" style="width: 100%">
          <el-option
            v-for="role in roleList"
            :key="role.roleId"
            :label="role.roleName"
            :value="role.roleId"
            :disabled="role.status == 1"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" :maxlength="512" /></el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" :loading="btnLoading" @click="btnSubmit">确 定</el-button>
      <el-button :disabled="btnLoading" @click="show = false">取 消</el-button>
    </div>

    <select-user-dialog :show.sync="showSelectUser" :selected="selectedUser" multi :max-num="100" @select="selectUserCallback" />
  </el-dialog>
</template>
<script>
// 手动推送通知
import { editFormMixin } from '@/utils/mixin'
import { pushNoticeAndSaveMsg } from '@/api/system/message'
import SelectUserDialog from '@/views/components/SelectUserDialog'
import {listRole} from "@/api/system/role";

export default {
  name: 'ManualPush',
  components: { SelectUserDialog },
  mixins: [editFormMixin],
  data() {
    var validSender = (rule,value,callback) => {
      if (this.form.userNames.length == 0 && this.form.roleIds.length == 0){
        callback(new Error("接收人和接收角色请至少填一项"));
      }else {
        this.$refs.userNames.clearValidate();
        this.$refs.roleIds.clearValidate();
        callback();
      }
    }
    return {
      primaryKey: 'typeId',
      addApi: pushNoticeAndSaveMsg,
      form: {
        title: '',
        body: '',
        parameters: '',
        userNames: [],
        roleIds: [],
        remark: ''
      },
      rules: {
        title: [{ required: true, message: '请输入通知标题' }],
        body: [{ required: true, message: '请输入通知内容' }],
        userNames:[{ required:true,validator:validSender,trigger : "change" }],
        roleIds:[{ required:true,validator:validSender,trigger : "change" }]
      },
      showSelectUser: false,
      selectedUser: [],
      roleList : []

    }
  },
  computed: {
    showUserNames() {
      return this.selectedUser.map(i => i.label).join(',')
    }
  },
  created() {
    this.getRoleList();
  },
  methods: {
    closed() {
      this.$refs.form.resetFields()
      this.selectedUser = []
    },
    getRoleList() {
      listRole({pageSize: 9999}).then((rv) => {
        if (rv.code === 200) {
          this.roleList = rv.rows
        }
      })
    },
    // 选择用户回调
    selectUserCallback(selection) {
      this.selectedUser = selection
      this.form.userNames = selection.map(i => i.userName)
    }
  }
}
</script>
<style lang="scss" scoped>
.fake-selector {
  cursor: pointer;
  /deep/ {
    .el-input__inner {
      cursor: pointer;
      border-right: none;
      &:hover,
      &:focus {
        border-color: #dcdfe6;
      }
    }
    .el-input-group__append {
      background-color: transparent;
      padding: 0 10px;
    }
  }
}
</style>
